import React from 'react';
import {
  View,
  Text,
  FlatList,
  TouchableOpacity,
  StyleSheet,
  Alert,
  SafeAreaView,
  StatusBar
} from 'react-native';

const App = () => {

  let Arr = [1, 2, 3, 4,];
  let widthLength = 50;

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={Arr}
        contentContainerStyle={{ height: 20, paddingTop: 100, flexDirection: 'row', }}
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        pagingEnabled={true}
        getItemLayout={(param, index) => ({ length: widthLength, offset: widthLength * index, index })}
        ref={(c) => (this.dateScrollView = c)}
        keyExtractor={(item, index) => item.text}
        renderItem={({ item, index, onPress, style }) => (
          <TouchableOpacity activeOpacity={1} onPress={() => {
            if (item.isClick && item.startTemp != this.state.selectTemp) {
              this.setSectionList(item, index);
            }
          }} style={{ zIndex: 10, width: widthLength, height: widthLength, justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }} key={index}>
            <Text style={{ zIndex: 10, color:  '#A4A4A4', fontSize: 13 }}>{1}</Text>
            <Text style={{ zIndex: 10, color:  '#A4A4A4', fontSize: 15, marginTop: 0, fontWeight: 'bold' }}>{1}</Text>
            <View style={{ zIndex: 9, borderRadius: 50, backgroundColor: '#00B0FF', width: widthLength, height: widthLength, position: 'absolute', top: 0, }} ></View>
          </TouchableOpacity>
        )
        }
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    padding: 16,
    backgroundColor: '#6200ee',
  },
  headerText: {
    fontSize: 20,
    fontWeight: 'bold',
    color: 'white',
    textAlign: 'center',
  },
  listContent: {
    padding: 8,
  },
  itemContainer: {
    flexDirection: 'row',
    padding: 16,
    backgroundColor: 'white',
    borderRadius: 8,
    alignItems: 'center',
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.2,
    shadowRadius: 1.5,
  },
  textContainer: {
    flex: 1,
  },
  titleText: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 4,
    color: '#333',
    zIndex: 10
  },
  descriptionText: {
    fontSize: 14,
    color: '#666',
    zIndex: 10
  },
  rightArrowContainer: {
    paddingLeft: 8,
    zIndex: 9
  },
  arrow: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#6200ee',
  },
  separator: {
    height: 8,
  },
});

export default App;